<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${script.getName()}"></title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<input style="display: none" id="uid" th:value="${user.getUid()}">
<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title" th:text="${script.getName()}"></h1>
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">基本信息</h3>
                    <div class="section-intro">
                        <img style="max-width: 300px; max-height: 300px" th:src="${script.getFace()}" alt="无法展示">
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="app-card-body">
                            <div class="settings-form">
                                <div class="mb-3">
                                    <label for="name" class="form-label">评分</label>
                                    <div class="form-control"
                                         th:text="${script.getStarPeople() != 0 ? script.getStar() / script.getStarPeople() : '暂时无人评'} + '分'"></div>
                                </div>
                                <input id="sid" type="number" th:value="${script.getSid()}" style="display: none">
                                <div class="mb-3">
                                    <label for="name" class="form-label">剧本名
                                    </label>
                                    <div class="form-control" id="name" th:text="${script.getName()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="type" class="form-label">剧本类型</label>
                                    <div class="form-control" id="type" th:text="${script.getType()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="people" class="form-label">参与人数</label>
                                    <div class="form-control" id="people" th:text="${script.getPeople()} + '人'"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="price" class="form-label">价格</label>
                                    <div class="form-control" id="price" th:text="${script.getPrice()} + '元'"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="setting-input-3" class="form-label">剧本内容</label>
                                    <div type="email" class="form-control" id="setting-input-3"
                                         style="height: fit-content;"
                                         th:text="${script.getContent()}"></div>
                                </div>
                                <a th:if="${user.getPerm().equals('admin')}"
                                   th:href="'/ms/admin/modify-script?sid=' + ${script.getSid()}"
                                   class="btn app-btn-primary"
                                   style="cursor: pointer">编辑剧本
                                </a>
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">NPC</h3>
                    <div class="section-intro">
                        剧本杀的npc属于辅助角色，真人扮演的服务型角色，负责推动剧情、提供服务等。有的角色没有对白，只负责营造氛围;有的角色全程在场，有大量表演和互动情节。
                    </div>
                    <div th:if="${user.getPerm().equals('admin')}" class="section-intro">
                        <a class="btn app-btn-primary" th:href="'/ms/admin/add-npc?sid=' + ${script.getSid()}">添加npc</a>
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="row g-4 settings-section">
                            <div th:each="npc : ${npcs}" class="col-6 col-md-4 col-xl-3">
                                <div class="app-card app-card-doc shadow-sm h-100">
                                    <div class="app-card-thumb-holder p-3" style="height: 200px;">
                                        <div class="app-card-thumb">
                                            <img class="thumb-image"
                                                 style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;margin: auto;"
                                                 th:src="${npc.getFace()}" alt="加载失败">
                                        </div>
                                    </div>
                                    <div class="app-card-body p-3 has-card-actions">
                                        <h4 class="app-doc-title truncate mb-0">
                                            <a th:text="${npc.getRole()}"></a>
                                        </h4>
                                        <div class="app-doc-meta" th:text="${npc.getDesc()}">
                                        </div>
                                        <div th:if="${user.getPerm().equals('admin')}" class="app-card-actions">
                                            <div class="dropdown">
                                                <div class="dropdown-toggle no-toggle-arrow" data-bs-toggle="dropdown"
                                                     aria-expanded="false">
                                                    <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                         class="bi bi-three-dots-vertical" fill="currentColor"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd"
                                                              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                                    </svg>
                                                </div><!--//dropdown-toggle-->
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item"
                                                           th:href="'/ms/admin/modify-npc?nid=' + ${npc.getNid()}">
                                                            <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                                 class="bi bi-pencil me-2"
                                                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                <path fill-rule="evenodd"
                                                                      d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                                            </svg>
                                                            编辑
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item"
                                                           style="cursor: pointer"
                                                           th:onclick="'deleteNPC(' + ${npc.getNid()} + ')'">
                                                            <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                                 class="bi bi-trash me-2"
                                                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                                <path fill-rule="evenodd"
                                                                      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                                            </svg>
                                                            删除
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--//dropdown-->
                                        </div><!--//app-card-actions-->
                                    </div><!--//app-card-body-->
                                </div><!--//app-card-->
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">房间</h3>
                    <div class="section-intro">
                        剧本杀的房间对于特定的剧本。
                    </div>
                    <div th:if="${user.getPerm().equals('admin')}" class="section-intro">
                        <a class="btn app-btn-primary" onclick="addHouse()">添加房间</a>
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="row g-4 settings-section">
                            <div th:each="house : ${houses}" class="col-6 col-md-4 col-xl-3">
                                <div class="app-card app-card-doc shadow-sm h-100">
                                    <div class="app-card-thumb-holder p-3">
                                        <div class="app-card-thumb">
                                            <img class="thumb-image thumb-image-custom"
                                                 src="https://img.51miz.com/Element/00/41/00/30/d5477258_E410030_0ec39f23.png"
                                                 alt="加载失败">
                                        </div>
                                        <span th:class="'badge bg-' + ${house.getColor()}"
                                              th:text="${house.transState()}"></span>
                                    </div>
                                    <div class="app-card-body p-3 has-card-actions">
                                        <h4 class="app-doc-title truncate mb-0">
                                            <a th:text="'房间号: ' + ${house.getHid()}"></a>
                                        </h4>
                                        <div th:if="${user.getPerm().equals('admin')}" class="app-card-actions">
                                            <div class="dropdown">
                                                <div class="dropdown-toggle no-toggle-arrow" data-bs-toggle="dropdown"
                                                     aria-expanded="false">
                                                    <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                         class="bi bi-three-dots-vertical" fill="currentColor"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd"
                                                              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                                    </svg>
                                                </div><!--//dropdown-toggle-->
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item"
                                                           style="cursor: pointer"
                                                           th:onclick="'deleteHouse(' + ${house.getHid()} +')'">
                                                            <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                                 class="bi bi-trash me-2"
                                                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                                <path fill-rule="evenodd"
                                                                      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                                            </svg>
                                                            删除
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--//dropdown-->
                                        </div><!--//app-card-actions-->
                                    </div><!--//app-card-body-->
                                </div><!--//app-card-->
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">
        </div><!--//container-fluid-->
        <div th:if="${appraises.size() != 0}" class="container-xl">
            <div class="position-relative mb-3">
                <div class="row g-3 justify-content-between">
                    <div class="col-auto">
                        <h1 class="app-page-title mb-0">用户评价</h1>
                    </div>
                </div>
            </div>

            <div th:each="appraise : ${appraises}" class="app-card app-card-notification shadow-sm mb-4">
                <div class="app-card-header px-4 py-3">
                    <div class="row g-3 align-items-center">
                        <div class="col-12 col-lg-auto text-center text-lg-start">
                            <img class="profile-image" th:src="${users.get(appraiseStat.index).getFace()}" alt="加载失败">
                        </div><!--//col-->
                        <div class="col-12 col-lg-auto text-center text-lg-start">
                            <h4 class="notification-title mb-1"
                                th:text="${users.get(appraiseStat.index).getName()}"></h4>
                            <ul class="notification-meta list-inline mb-0">
                                <li class="list-inline-item" th:text="${appraise.getStar()} + '星'"></li>
                            </ul>
                        </div><!--//col-->
                    </div><!--//row-->
                </div><!--//app-card-header-->
                <div class="app-card-body p-4">
                    <div class="notification-content" th:text="${appraise.getContent()}"></div>
                </div><!--//app-card-body-->
            </div><!--//app-card-->
        </div>
        <div class="container-xl">
            <div class="row g-4 mb-4">
                <div class="col-12 col-lg-12">
                    <div class="app-card app-card-basic d-flex flex-column align-items-start shadow-sm">
                        <div class="app-card-header p-3 border-bottom-0">
                            <div class="row align-items-center gx-3">
                                <div class="col-auto">
                                    <div class="app-icon-holder">
                                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-receipt"
                                             fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
                                            <path fill-rule="evenodd"
                                                  d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
                                        </svg>
                                    </div><!--//icon-holder-->

                                </div><!--//col-->
                                <div class="col-auto">
                                    <h4 class="app-card-title">进行评价</h4>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//app-card-header-->
                        <div class="app-card-body px-4">
                            <div class="intro">
                                如果你喜欢此剧本就在这里评价吧!
                            </div>
                            <div class="app-card-body">
                                <div class="settings-form">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" id="settings-checkbox-1"
                                               name="settings-radio">
                                        <label class="form-check-label" for="settings-checkbox-1">
                                            1星
                                        </label>
                                    </div><!--//form-check-->
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" id="settings-checkbox-2"
                                               name="settings-radio">
                                        <label class="form-check-label" for="settings-checkbox-2">
                                            2星
                                        </label>
                                    </div><!--//form-check-->
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" id="settings-checkbox-3"
                                               name="settings-radio">
                                        <label class="form-check-label" for="settings-checkbox-3">
                                            3星
                                        </label>
                                    </div><!--//form-check-->
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" id="settings-checkbox-4"
                                               name="settings-radio">
                                        <label class="form-check-label" for="settings-checkbox-4">
                                            4星
                                        </label>
                                    </div><!--//form-check-->
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" id="settings-checkbox-5"
                                               name="settings-radio">
                                        <label class="form-check-label" for="settings-checkbox-5">
                                            5星
                                        </label>
                                    </div><!--//form-check-->
                                </div>
                            </div>
                            <textarea style="height: 100px; width: 300px; resize: none" id="content"></textarea>
                        </div><!--//app-card-body-->
                        <div class="app-card-footer p-4 mt-auto">
                            <a class="btn app-btn-secondary" onclick="doAppraise('post')">进行评价</a>
                        </div><!--//app-card-footer-->
                    </div><!--//app-card-->
                </div><!--//col-->
            </div><!--//row-->
        </div>
    </div><!--//app-content-->
</div><!--//app-wrapper-->


<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    function deleteNPC(nid) {
        $.ajax({
            url: '/ms/api/npc/' + nid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('删除失败')
            }
        })
    }

    function addHouse() {
        var house = {}
        house['sid'] = parseInt(document.getElementById('sid').value)
        house['state'] = 'idle'
        $.ajax({
            url: '/ms/api/house',
            method: 'post',
            data: JSON.stringify(house),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('添加失败')
            }
        })
    }

    function deleteHouse(hid) {
        $.ajax({
            url: '/ms/api/house/' + hid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('删除失败')
            }
        })
    }

    function doAppraise() {
        for (var i = 1; i <= 5; ++i) {
            var check = document.getElementById('settings-checkbox-' + i).checked
            if (check) {
                var appraise = {}
                appraise['uid'] = parseInt(document.getElementById('uid').value)
                appraise['sid'] = parseInt(document.getElementById('sid').value)
                appraise['star'] = i
                appraise['content'] = document.getElementById('content').value
                $.ajax({
                    url: '/ms/api/appraise/',
                    method: 'post',
                    data: JSON.stringify(appraise),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        if (result['success']) location.reload()
                        else alert('评价失败')
                    }
                })
                return
            }
        }
    }
</script>

</body>
</html> 

